<!-- changfengmoshiApply.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>自由课程</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css">
		<!-- <link rel="stylesheet" type="text/css" href="../css/weui.min.css"> -->
		<link rel="stylesheet" type="text/css" href="../css/base.css"/>
		<link rel="stylesheet" type="text/css" href="../css/CFNetPP_Base.css">
		<style type="text/css">
			html,body{
				height: 100%;
			}
			.bg-img{
				width: 100%;
				position: fixed;
				left: 0;
				top: 0;
				display: block;
			}
			.content-div{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				/*background-image: url(../image/changfengmoshishenqing.jpg);*/
				/*background-size: 100% 100%;*/
			}
			.bg-div{
				background-color: rgba(0,0,0,0.4);
				width: 100%;
				height: 100%;
				position: fixed;
				left: 0;
				top: 0;
			}
			.title-div{
				padding: 66px 10px 20px 10px;
				text-align: center;
			}
			.title-p{
				font-size: 22px;
				line-height: 22px;
				margin-bottom: 0;
			}
			.title-left-span{
				color: #18b4ed;
			}
			.title-right-span{
				color: white;
			}
			.input-content-div{
				padding: 0 60px;
			}
			.apply-input{
				border: none;
				outline: medium;
				width: 100%;
				height: 40px;
				background-color: rgba(0,0,0,0);
				font-size: 16px;
				color: white;
			}
			.input-title{
				color: #bfbfbf;
				font-size: 18px;
				text-align: center;
				line-height: 18px;
				padding: 16px 0;
				font-weight: 300;
			}
			.input-div{
				background-color: rgba(255,255,255,0.3);
				border: 1px solid white;
				padding: 0 8px;
			}
			.prompt-title{
				color: #bfbfbf;
				font-size: 14px;
				line-height: 14px;
				padding: 30px 60px 10px 60px;
				font-weight: 300;
			}
			input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea{
			    line-height: 18px;
			    width: 100%;
			    height: 40px;
			    margin-bottom: 0px;
			    padding: 0;
			    -webkit-user-select: text;
			    border: none;
			    border-radius: 0px;
			    outline: 0;
			    background-color: rgba(0,0,0,0);
			    -webkit-appearance: none;
			}
			.select-div{
				padding: 0 58px;
				color: white;
				font-size: 16px;
				font-weight: 300;
			}
			.mui-checkbox input[type=checkbox]:checked:before {
			    content: '\e441';
			}
			.mui-checkbox.mui-left input[type=checkbox], .mui-radio.mui-left input[type=radio] {
				left: 0;
			}
			.mui-checkbox.mui-left label, .mui-radio.mui-left label {
			    padding-right: 0;
			    padding-left: 30px;
			}
			.mui-input-row label{
				padding: 10px 0;
			}
			.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
				font-weight: 300;
			    color: white;
			}
			.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before {
			    color: #18b4ed;
			}
			.bottom-btn-div{
				padding: 40px 60px;
				text-align: center;
			}
			.submit-btn{
				color: white;
				background-color: #18b4ed;
				border: 1px solid #18b4ed;
				width: 120px;
				height: 40px;
				border-radius: 20px;
				line-height: 40px;
				padding: 0;
				font-size: 18px;
				font-weight: 300;
			}
			.submit-btn:active{
				color: #ededed;
				background-color: #0da0d0;
				border-color: #0da0d0;
			}
			.back-div{
				position: fixed;
				width: 44px;
				height: 44px;
				left: 0;
				top: 22px;
				/*background-color: rgba(0,0,0,0.5);
				border-radius: 22px;*/
			}
			.back-img{
				height: 20px;
				margin-top: 12px;
				margin-left: 14px;
			}
			.mui-checkbox input[type=checkbox], .mui-radio input[type=radio]{
				width: 22px;
				height: 22px;
				top: 7px;
			}
			.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
				font-size: 22px;
			}
		</style>
	</head>
	<body>
		<img class="bg-img" src="../image/changfengmoshishenqing.jpg">
		<div class="bg-div"></div>
		<div class="content-div">
			<div class="back-div" onclick="backClick()">
				<img class="back-img" src="../image/icon_jiantou.png">
			</div>
			<div class="title-div">
				<p class="title-p">
					<span class="title-left-span">
						长风模式
					</span>
					<span class="title-right-span">
						体验申请卡
					</span>
				</p>
			</div>
			<div class="input-content-div">
				<div class="input-title">
					学校名称
				</div>
				<div class="input-div">
					<input id="shool_name" class="apply-input" type="text" name="" maxlength="50">
				</div>
			</div>
			<div class="input-content-div">
				<div class="input-title">
					教师姓名
				</div>
				<div class="input-div">
					<input id="teacher_name" class="apply-input" type="text" name="" maxlength="20">
				</div>
			</div>
			<div class="input-content-div">
				<div class="input-title">
					手 机 号
				</div>
				<div class="input-div">
					<input id="telephone_number" class="apply-input" type="number" name="" oninput="if(value.length>11)value=value.slice(0,11)">
				</div>
			</div>
			<div class="prompt-title">
				* 请选择要开通的平台（可全选）
			</div>
			<div class="select-div">
				<div class="mui-input-row mui-checkbox mui-left">
					<label>长风实习平台</label>
					<input id="train" value="Item1" type="checkbox">
				</div>
				<div class="mui-input-row mui-checkbox mui-left">
					<label>长风教学平台</label>
					<input id="teach" value="Item2" type="checkbox">
				</div>
			</div>
			<div class="bottom-btn-div">
				<a type="button" class="mui-btn submit-btn" onclick="onSubmitApply()">
					提交
				</a>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/jquery.min.js"></script>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/MD5.js"></script>
	<script type="text/javascript" src="../script/requestTool.js"></script>
	<script type="text/javascript" src="../script/mui.min.js"></script>
	<script type="text/javascript">
		apiready = function(){
		    
		}
		function onSubmitApply(){
			var shool_name = $('#shool_name').val();
			var teacher_name = $('#teacher_name').val();
			var telephone_number = $('#telephone_number').val();
			var train_status = $('#train').is(':checked');
			var teach_status = $('#teach').is(':checked');
			if (shool_name == '') {
				api.toast({
				    msg: '学校名称不能为空'
				});
				return;
			}
			if (teacher_name == '') {
				api.toast({
				    msg: '老师姓名不能为空'
				});
				return;
			}
			if (telephone_number == '') {
				api.toast({
				    msg: '练习电话不能为空'
				});
				return;
			}
			if (train_status == false && teach_status == false) {
				api.toast({
				    msg: '请至少选择一个平台'
				});
				return;
			}
			var isopentrain = train_status == true ? 1 : 0;
			var isopenteach = teach_status == true ? 1 : 0;
			var params = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				schoolname : shool_name,
				teachername : teacher_name,
				telephone : telephone_number,
				isopenteach : isopenteach,
				isopentrain : isopentrain
			};
			cfnetppPOST(url_cfnetModelApply, params, false, function(data, status){
				if (status == 'success') {
					if (data.code == 200) {
						mui.alert('您的申请提交成功，我们会根据您的申请信息安排专员尽快联系您', '提交成功', function() {
							backClick();
						});
					}else if (data.code == 109){
						api.toast({
						    msg: '您已提交过申请'
						});
					}else{
						api.toast({
						    msg: '提交失败，请重试'
						});
					}
				}else{
					api.toast({
					    msg: '网络异常，请检查您的网络'
					});
				}
			});
		}
		function backClick(){
			api.closeWin();
		}
	</script>
</html>